<template>
        <page-layout :desc="desc" :linkList="linkList">
                <div v-if="this.extraImage && !isMobile" slot="extra" class="extraImg">
                        <img :src="extraImage"/>
                </div>
                <page-toggle-transition :disabled="animate.disabled" :animate="animate.name"
                                        :direction="animate.direction">
                        <router-view ref="page"/>
                </page-toggle-transition>
        </page-layout>
</template>

<script>
        import PageLayout from './PageLayout'
        import PageToggleTransition from '../components/transition/PageToggleTransition';
        import {mapState} from 'vuex'

        export default {
                name: 'PageView',
                components: {PageToggleTransition, PageLayout},
                data() {
                        return {
                                page: {}
                        }
                },
                computed: {
                        ...mapState('setting', ['isMobile', 'multiPage', 'animate']),
                        desc() {
                                return this.page.desc
                        },
                        linkList() {
                                return this.page.linkList
                        },
                        extraImage() {
                                return this.page.extraImage
                        }
                },
                mounted() {
                        this.page = this.$refs.page
                },
                updated() {
                        this.page = this.$refs.page
                }
        }
</script>

<style lang="less" scoped>
        .extraImg {
                margin-top: -60px;
                text-align: center;
                width: 195px;

                img {
                        width: 100%;
                }
        }
</style>
